<template>
  <div class="filterForm">
    <div class="dataFilter" v-if="dataFilterDayWeekMonthShow">
      <span
        @click="changeFromDayWeekMonth(index)"
        v-for="(item, index) in spanDayWeekMonthList"
        :key="index"
        :class="{ active: activeSpanDayWeekMonth == index + 1 }"
        >{{ item }}</span
      >
    </div>
    <div class="dataFilter" v-if="dataFilterShow">
      <span
        @click="changeFrom(index)"
        v-for="(item, index) in spanlist"
        :key="index"
        :class="{ active: activeSpan == index + 1 }"
        >{{ item }}</span
      >
    </div>
    <el-form
      ref="ruleForm"
      class="e-form"
      :model="formData"
      label-width="5rem"
      :label-position="labelPosition"
      :rules="rules"
    >
      <div class="f-box">
        <slot></slot>
      </div>
    </el-form>
    <div class="tool">
      <slot name="tool"></slot>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    formData: {
      type: Object,
      default() {
        return {}
      }
    },
    rules: {
      type: Object,
      default() {
        return {}
      }
    },
    dataFilterShow: {
      type: null,
      default() {
        return true
      }
    },
    dataFilterDayWeekMonthShow: {
      type: null,
      default() {
        return false
      }
    }
  },
  data() {
    return {
      labelPosition: 'left',
      spanlist: ['今日', '昨日', '近7天', '近30天'],
      spanDayWeekMonthList: ['日统计', '周统计', '月统计'],
      activeSpan: 1,
      activeSpanDayWeekMonth: 1
    }
  },
  methods: {
    submitForm() {
      this.$refs['ruleForm'].validate(valid => {
        console.log(valid)
        if (valid) {
          this.$emit('submit')
        } else {
          return false
        }
      })
    },
    changeFrom(index) {
      this.activeSpan = Number(index) + 1
      const end = new Date()
      const start = new Date()
      if (index == 1) {
        // 昨天
        start.setTime(start.getTime() - 3600 * 1000 * 24)
        end.setTime(end.getTime() - 3600 * 1000 * 24)
      } else if (index == 2) {
        // 近7天
        start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
      } else if (index == 3) {
        // 近30天
        start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
      }
      this.$emit('changeTime', [start, end])
    },
    changeFromDayWeekMonth(index) {
      this.activeSpanDayWeekMonth = Number(index) + 1
      this.$emit('changeFromDayWeekMonth', index)
    },
    clearForm() {
      this.activeSpan = null
    }
  },
  mounted() {}
}
</script>

<style lang="scss" scoped>
.filterForm {
  background-color: #fff;
  padding: 15px;
  .dataFilter {
    display: flex;
    flex-direction: row;
    align-items: center;
    margin-bottom: 15px;
    span {
      padding: 8px 10px;
      height: 100%;
      line-height: 100%;
      border-radius: 2px;
      border: 1px solid #e0e2e4;
      box-sizing: border-box;
      font-size: 14px;
      font-weight: 400;
      color: #bfbfc3;
      margin-right: 10px;
      cursor: pointer;
      &:hover {
        color: #0d5dfe;
        border: 1px solid #0d5dfe;
      }
      &.active {
        color: #0d5dfe;
        border: 1px solid #0d5dfe;
      }
    }
  }
  ::v-deep {
    .el-form-item {
      width: 320px;
      display: inline-block;
      box-sizing: border-box;
      margin-right: 30px;
      margin-bottom: 20px;
    }
    .el-select,
    .el-date-editor,
    .el-cascader-menus,
    .el-cascader,
    .el-range-editor {
      width: 100%;
    }
    .el-form-item__label {
      // text-align: right;
    }
    .el-range-editor.el-input__inner {
      padding: 3px 5px;
    }
    .el-date-editor .el-range-separator {
      padding: 0;
      font-size: 13px;
    }
    .el-date-editor .el-range__close-icon {
      width: 20px;
    }
  }
}
</style>
